<template>
  <!-- 页面模块暂时取消 -->
  <div class="message">
    <div class="alert">
      <span class="el-icon-warning"></span>
      <span class="choice">已选择2项</span>
      <span class="readed">标记已读</span>
      <span class="delete">删除</span>
      <button class="allReaded">全部已读</button>
      <button class="allDelete" @click="handle">全部删除</button>
    </div>

    <div class="table1">
      <el-table :data="tableData" style="width: 100%">
        <el-table-column prop="date" label width="100">
          <el-checkbox v-model="checked"></el-checkbox>
        </el-table-column>
        <el-table-column prop="symbol" label width="80">
          <span class="circle">●</span>
        </el-table-column>
        <el-table-column prop="title" label="标题" width="580"></el-table-column>
        <el-table-column prop="time" label="消息时间" width="280"></el-table-column>
      </el-table>
    </div>

    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage4"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="10"
        layout="prev, pager, next,sizes, jumper"
        :total="400"
      ></el-pagination>
    </div>
  </div>
</template>

  <script>
export default {
  data() {
    return {
      checked: true,
      currentPage4: 4,
      tableData: [
        {
          title: '这是一段描述，关于这个应用的描述',
          time: '2016-09-21 08:59:50',
        },
        {
          title: '这是一段描述，关于这个应用的描述',
          time: '2016-09-21 08:59:50',
        },
        {
          title: '这是一段描述，关于这个应用的描述',
          time: '2016-09-21 08:59:50',
        },
        {
          title: '这是一段描述，关于这个应用的描述',
          time: '2016-09-21 08:59:50',
        },
        {
          title: '这是一段描述，关于这个应用的描述',
          time: '2016-09-21 08:59:50',
        }
      ]
    }
  },
  methods: {
    handle: function () {
      this.checked = true
    }
  },
  handleSizeChange(val) {
    console.log(`每页 ${val} 条`);
  },
  handleCurrentChange(val) {
    console.log(`当前页: ${val}`);
  }
}
  </script>

<style lang="less">
.alert {
  margin: 20px 10px 20px;
  background-color: rgb(230, 247, 255);
  border: 1px solid rgb(188, 232, 255);
  border-radius: 5px;
  line-height: 50px;
}

.choice {
  margin: 0 10px;
}

.el-icon-warning {
  color: rgb(7, 143, 234);
  margin-left: 10px;
}

.readed,
.delete {
  color: rgb(24, 157, 255);
  margin: 0 5px;
}

.allReaded,
.allDelete {
  outline: none;
  background-color: rgb(24, 144, 255);
  color: white;
  width: 110px;
  line-height: 30px;
  border-radius: 5%;
  margin: 0 5px;
  border-color: rgb(24, 144, 255);
}

.circle {
  color: rgb(243, 34, 45);
}

.block {
  margin: 80px 20px;
}
</style>